<template>
    <view>

        <view class="content">

            <!-- 聊天内容 -->
            <scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView">
                <view class="chat-main" :style="{paddingBottom:inputh+'px'}">
                    <view class="chat-ls">

                        <view v-for="(item,index) in msgListHappy" :key="index">
                            <view class="chat-time">
                                {{item.time}}
                            </view>
                            <view :class="['msg-m',item.from!=user.username?'msg-left':'msg-right']">
                                <!-- <image class="user-img" :src="item.to=='in'?sessions[index].avatar:user.avatar"> -->
                                <!-- </image> -->
                                <view class="message">
                                    <!-- 文字 -->
                                    <view class="msg-text">
                                        <rich-text class="rich-text" :nodes="item.msg" ></rich-text>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
            </scroll-view>

        </view>

        <view class="footer" ref="footer" id="footer">
            <view class="content-wrap">
                <!-- @keyup.enter="sendMessge()" -->
                <textarea class="content" v-model="textMsg" maxlength="-1" auto-height />
            </view>
            <view class="btn-wrap">
                <button class="btn" :disabled="disable" :class="{'disabled': disable}" @tap="sendMessge()">发送</button>
            </view>
        </view>

    </view>
</template>

<script>
    import WebSocketSend from '@/commom/websocket.js';
	import $store from '@/store/index.js';
    export default {
        name: 'chat',
        data() {
            return {
                // 登录用户
                pageId: "happy",
                textMsg: '',
                user: '',
                // 消息记录列表
                // msgListHappy: [],
                // 发送的消息
                message: {
                    time: null, //时间
                    to: '', //发给谁
                    msg: '',
                    from: '',
                },
                disable: true,
                scrollToView: '',
                inputh: '60',
                // 在线用户列表
                userList: []
            }
        },
        mounted() {
          WebSocketSend.connectSocketInit();
          this.user = uni.getStorageSync("user");
          console.log(this.user);
        },
        computed:{
            msgListHappy(){
                return $store.state.msgListHappy
            }
        },
        watch: {
            //监听text，当他有值时发送按钮才可以点击
            textMsg(newVal) {
                if (newVal.trim() != '') {
                    this.disable = false
                } else {
                    this.disable = true
                }
            }
        },
        methods: {
            async sendMessge() {
                if (typeof(WebSocket) == "undefined") {
                    console.log("您的浏览器不支持WebSocket");
                } else {
                    this.message.from = this.user.username;
                    this.message.time = new Date().toLocaleTimeString();
                    this.message.msg = this.textMsg;
                    if(this.user.username != this.pageId){
                        this.message.to = this.pageId;
                        // $store.commit("setmsgListHappy",this.message);
                        // console.log($store.state.msgListHappy)
                    }
                    console.log("您的浏览器支持WebSocket");
                    await WebSocketSend.sendMessage(this.message);
                    this.message.msg = '';
                    this.textMsg='';
                }
            },
            
        },
    }
</script>
<style scoped>
    scroll-view {
        /* height: 200rpx; */
    }

    page {
        height: 100%;
        background-color: rgba(244, 244, 244, 1);
    }

    .text-show {
        /* padding: 10p;
			display: flex;
			align-items: center;
			word-wrap:break-word; */
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-box-orient: vertical;
    }

    .user-img {
        flex: none;
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
    }

    .chat-time {
        font-size: 24rpx;
        color: rgba(39, 40, 50, 0.3);
        line-height: 34rpx;
        padding: 10rpx 0rpx;
        text-align: center;
    }

    .content {
        height: 100%;
        background-color: rgba(244, 244, 244, 1);
    }

    .chat-main {
        padding-left: 32rpx;
        padding-right: 32rpx;
        padding-top: 20rpx;
        // padding-bottom: 120rpx;  //获取动态高度
        display: flex;
        flex-direction: column;
    }

    .message {
        flex: none;
        max-width: 480rpx;
    }

    .msg-text {
        font-size: 32rpx;
        color: rgba(39, 40, 50, 1);
        line-height: 44rpx;
        padding: 18rpx 24rpx;

    }




    .msg-left .msg-text {
        flex-direction: row;
        margin-left: 16rpx;
        background-color: #fff;
        border-radius: 0rpx 20rpx 20rpx 20rpx;
    }

    .msg-left .msg-img {
        flex-direction: row;
        margin-left: 16rpx;
    }

    .msg-right {
        flex-direction: row-reverse;
    }

    .msg-right .msg-text {
        flex-direction: row-reverse;
        margin-right: 16rpx;
        background-color: rgba(85, 170, 255, 0.8);
        border-radius: 20rpx 0rpx 20rpx 20rpx;
    }

    .msg-right .msg-img {
        flex-direction: row-reverse;
        margin-right: 16rpx;
    }

    .chat {
        height: 100%;
    }

    .chat-ls .msg-m {
        display: flex;
        padding: 20rpx 0;
    }

    .chat-ls .msg-img {
        max-width: 400rpx;
        border-radius: 20rpx;
    }


    .emoji-table {
        /*开启弹性布局*/
        display: flex;
        /*wrap：换行，第一行在上方。*/
        flex-wrap: wrap;
        /*居中对齐 每个项目两侧的间隔相等*/
        /* justify-content:space-around; */
        /*或者使用 两端对齐，项目之间的间隔都相等。*/
        justify-content: space-between;
        max-width: 500rpx;
        max-height: 300rpx;
        position: fixed;
        z-index: 10;
        background-color: #f8fff2;
        padding: 5rpx;
        border-radius: 10rpx;
        bottom: 100rpx;
        left: 130rpx;
    }

    .btns {
        display: flex;
    }

    .btn {
        background-color: #55aaff;
        color: white;
        padding: 5rpx;
        font-size: small;
        margin-left: 10rpx;
        border-radius: 10rpx;
    }

    .emoji {
        width: 50rpx;
        height: 50rpx;
        margin: 2rpx;
    }

    .icon {
        width: 80rpx;
        height: 70rpx;
        margin-left: 10rpx;
        margin-top: auto;
        margin-bottom: 14rpx;
    }

    .selecting-image {
        width: 500rpx;
        height: 600rpx;
    }

    .image-table {
        /*开启弹性布局*/
        display: flex;
        /*wrap：换行，第一行在上方。*/
        flex-wrap: wrap;
        /*居中对齐 每个项目两侧的间隔相等*/
        /* justify-content:space-around; */
        /*或者使用 两端对齐，项目之间的间隔都相等。*/
        justify-content: space-between;
        max-width: 400rpx;
        max-height: 500rpx;
        position: fixed;
        z-index: 10;
        background-color: #f8fff2;
        padding: 5rpx;
        border-radius: 10rpx;
        bottom: 100rpx;
        left: 130rpx;
    }

    .footer {
        width: 100%;
        background-color: #E9EDF4;
        display: flex;
        position: fixed;
        bottom: 0;
    }

    .footer .content-wrap {
        width: 78%;
        margin-left: 2%;
    }

    .footer .content {
        width: 100%;
        box-sizing: border-box;
        margin: 14rpx 0;
        background-color: #FFFFFF;
        border-radius: 30rpx;
        padding: 16rpx;
        caret-color: #01B4FE;
        text-align: left;
    }

    .footer .btn-wrap {
        width: 18%;
        margin-right: 5%;
    }

    .footer .btn {
        width: 15%;
        height: 65rpx;
        font-size: 26rpx;
        margin-left: 2%;
        background-color: #01B4FE;
        color: #FFFFFF;
        position: fixed;
        bottom: 14rpx;
        border: 0;
        outline: none;
    }

    .footer .btn-wrap .disabled {
        background-color: #aae8f5;
    }

    /deep/ .uni-textarea-wrapper {
        max-height: 180rpx;
    }
</style>